<template>
  <view :class="['point-search', {'point-search_show':myVisible}]">
    <view class="search-box">
      <text class="search-city" @click="handleCity">{{ city.name }}</text>
      <input v-model="searchStr" class="search-input" placeholder="请输入关键词搜索" @input="handleSearch"/>
      <text @click="myVisible = false">取消</text>
    </view>
    <view class="point-list">
      <view v-for="item in searchList" :key="item.id" class="point-item" @click="handleChangePoint(item)">
        <view class="point-item--name">{{ item.name }}</view>
        <view class="point-item--addres">{{ item.address }}</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, inject, ref } from 'vue'
import { useStore } from 'vuex'

const $props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const $emits = defineEmits(['change', 'update:visible'])
const $store = useStore()
const piMapSearch = inject('mapSearch')
const city = computed(() => $store.state.city)
let myVisible = computed({
  get: () => $props.visible,
  set(val) {
    $emits('update:visible', val)
  }
})
let searchStr = ref('')
let searchList = ref([])
const handleSearch = () => {
  piMapSearch(searchStr.value, (result) => {
    searchList.value = result.pois
  })
}
const handleChangePoint = (item) => {
  $emits('change', item)
  myVisible.value = false
}

const handleCity = () => {
  uni.navigateTo({ url: '/pages/city' })
}
</script>
<style lang="scss" scoped>
.point-search {
  background: #fff;
  bottom: 0;
  height: 0;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  transition: all 1s;
  z-index: 9;
}

.point-search_show {
  box-sizing: border-box;
  height: calc(100vh - var(--window-top));
  padding: $uni-spacing-max;
}

.search-box {
  align-items: center;
  display: flex;
  font-size: $uni-font-size-base;
  margin-bottom: $uni-spacing-max;
}

.search-input {
  background: $uni-bg-color-grey;
  border: 1px solid $uni-border-color;
  border-radius: $uni-border-radius-base;
  flex: 1;
  font-size: $uni-font-size-sm;
  height: 50rpx;
  margin-right: $uni-spacing-big;
  padding: 0 10rpx;
}

.search-city {
  font-size: $uni-font-size-base;
  margin-right: $uni-spacing-big;
  max-width: 150rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.point-item {
  border-bottom: 1px solid #eee;
  font-size: $uni-font-size-base;
  padding: $uni-spacing-lg 0 $uni-spacing-max;

  &--name {
    margin: $uni-spacing-big 0;
  }

  &--addres {
    color: $uni-text-color-grey;
    font-size: $uni-font-size-base;
    line-height: 32rpx;
  }
}
</style>
